<template>
    <div class="mine-order bs">
        <div class="mine-order-title">
            <text class="mine-order-title-left">新订单</text>
            <div class="mine-order-title-more" @click="orderClick('payment')">
                <text class="mine-order-header-title">查看更多订单</text>
                <text class="mine-order-arrow">&#xe61f;</text>
            </div>
        </div>
        <div class="mine-order-info">
            <div class="mine-order-unpaid" @click="orderClick('payment')">
                <text class="mine-order-icon">&#xe678;</text>
                <text class="mine-order-item-title">待付款</text>
                <text class="mine-order-num totalColor" v-if="unpaid > 0">{{showUnpaid}}</text>
            </div>
            <div class="mine-order-unpaid" @click="orderClick('delivery')">
                <text class="mine-order-icon">&#xe740;</text>
                <text class="mine-order-item-title">待发货</text>
                <text class="mine-order-num totalColor" v-if="unshipping > 0">{{showUnshipping}}</text>
            </div>
            <div class="mine-order-unpaid" @click="orderClick('received')">
                <text class="mine-order-icon">&#xe619;</text>
                <text class="mine-order-item-title">待收货</text>
                <text class="mine-order-num totalColor" v-if="shipped > 0">{{showShipped}}</text>
            </div>
            <div class="mine-order-unpaid" @click="orderClick('complete')">
                <text class="mine-order-icon">&#xe617;</text>
                <text class="mine-order-item-title">已完成</text>
                <text class="mine-order-num totalColor" v-if="completed > 0">{{showCompleted}}</text>
            </div>
            <div class="mine-order-unpaid" @click="askforClick">
                <text class="mine-order-icon">&#xe627;</text>
                <text class="mine-order-item-title">退款/售后</text>
                <text class="mine-order-num totalColor" v-if="askforTotal > 0">{{showAskforTotal}}</text>
            </div>
        </div>
    </div>
</template>

<script>
    import {summary} from '@/api/order.js'
    import {summary as summaryAskfor} from '@/api/askfor.js'
    var globalEvent = app.requireModule('globalEvent');
    export default {
        data() {
            return {
                shipped: 0,
                unshipping: 0,
                completed: 0,
                unpaid: 0,
                refunds: 0,
                showShipped: 0,
                showUnshipping: 0,
                showCompleted: 0,
                showUnpaid: 0,
                showRefunds: 0,
                askforTotal:0,
                showAskforTotal:0
            }
        },
        created() {
            this.initIconFont()
            if (this.getGlobalData().token != null){
                this.summaryClick()
                this.summaryAskforClick()
            };
        },
        props:[
            'time'
        ],
        watch:{
            time(val, oldVal){//普通的watch监听
                var _this = this
                if (_this.getGlobalData().token != null){
                    _this.summaryClick()
                    _this.summaryAskforClick()
                };
            },

        },
        methods: {
            orderClick(type) {
                var _this = this
                if (this.getGlobalData().token == null) {
                    this.loginClick()
                    return;

                }
                eeui.openPage({
                    url: 'root://pages/order/list.js',
                    statusBarType: 'immersion',
                    statusBarStyle: false,
                    params: type
                }, result => {
                    if (result.status == 'stop')  {
                        _this.summaryClick()
                        _this.summaryAskforClick()
                    }
                });
            },
            askforClick() {
				if(this.checkPermission(['askfor.query'])==false){
					eeui.alert('您没有退款售后权限', function() {

					});
                    return
				}
                var _this = this
                if (this.getGlobalData().token == null) {
                    this.loginClick()
                    return;

                }
                eeui.openPage({
                    url: 'root://pages/askfor/index.js',
                    statusBarType: 'immersion',
                    statusBarStyle: false,
                }, result => {
                    if (result.status == 'stop')  {
                        _this.summaryClick()
                        _this.summaryAskforClick()
                    }
                });
            },
            summaryClick() {
                summary().then(
                    res => {
                        this.shipped = res.data.shipped;
                        this.unshipping = res.data.unshipping;
                        this.completed = res.data.completed;
                        this.unpaid = res.data.unpaid;
                        this.refunds = res.data.refunds;
                        this.showShipped = res.data.shipped > 99 ? '...' : res.data.shipped;
                        this.showUnshipping = res.data.unshipping > 99 ? '...' : res.data.unshipping;
                        this.showCompleted = res.data.completed > 99 ? '...' : res.data.completed;
                        this.showUnpaid = res.data.unpaid > 99 ? '...' : res.data.unpaid;
                        this.showRefunds = res.data.refunds > 99 ? '...' : res.data.refunds

                    }
                ).catch(error => {
                    console.log(error)
                })
            },
            summaryAskforClick(){
                summaryAskfor().then(
                    res => {
                        console.log('售后')
                        console.log(res)
                        var unconfirm =0
                        var confirmed = 0
                        var shipped = 0
                        var unRefund = 0
                        if(res.data.unconfirm != undefined){
                            unconfirm = res.data.unconfirm
                        }
                        if(res.data.confirmed != undefined){
                            confirmed = res.data.confirmed
                        }
                        if(res.data.shipped != undefined){
                            shipped = res.data.shipped
                        }
                        if(res.data.unRefund != undefined){
                            unRefund = res.data.unRefund
                        }
                        this.askforTotal = unconfirm+confirmed+shipped+unRefund
                        this.showAskforTotal =  this.askforTotal > 99 ? '...' :  this.askforTotal
                    }
                ).catch(error => {
                    console.log(error)
                })
            },
            refreshNumberClick(){
                this.$emit('refreshNumber');
            },
            loginClick() {
                var _this = this
                eeui.openPage({
                    url: 'root://pages/login/msgLogin.js',
                    statusBarType: 'immersion',
                    statusBarStyle: false
                }, result => {
                    if (result.status == 'stop') {
                        _this.refreshNumberClick()
                    }
                });
            },
        }
    }
</script>

<style scoped>
    .mine-order {
        margin: 30px 30px 0;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 10px;
    }

    .mine-order-title {
        font-size: 30px;
        position: relative;
        line-height: 80px;
        border-bottom-color: rgba(231, 233, 237, 0.5);
        border-bottom-width: 1px;
        border-bottom-style: solid;
        padding: 20px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .mine-order-title-more {
        font-size: 25px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        opacity: 0.5;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .mine-order-arrow {
        font-family: iconfont2;
        color: rgba(0, 0, 0, 0.5);
        font-size: 22px;
    }

    .mine-order-title-more text {
        display: block;
    }

    .mine-order-info {
        display: flex;
        align-items: center;
        font-size: 25px;
        flex-direction: row;
        font-weight: 400;
        /*padding: 20px 0;*/
        height: 150px;
    }

    .mine-order-icon {
        display: inline-block;
        font-size: 60px;
        color: rgba(83, 168, 255, 1);
        font-family: iconfont2;
    }

    .mine-order-num {
        position: absolute;
        right: 33px;
        top: 20px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        font-size: 20px;
        line-height: 30px;
        text-align: center;
        color: #fff;
        /* background-color: #f77211; */
    }

    .mine-order-unpaid {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        justify-content: center;
        flex: 1;
        height: 150px;
    }

    .mine-order-notdelivere {
        position: relative;
        text-align: center;
        flex-grow: 1;
    }

    .mine-order-delivered {
        position: relative;
        text-align: center;
        flex-grow: 1;
    }

    .mine-order-evaluate {
        position: relative;
        text-align: center;
        flex-grow: 1;
    }

    .mine-order-refund {
        position: relative;
        text-align: center;
        flex-grow: 1;
    }

    .mine-order-header-title {
        font-size: 24px;
    }

    .mine-order-title-left {
        font-size: 26px;
    }

    .mine-order-item-title {
        font-size: 24px;
        margin-top: 10px;
        color: rgba(0, 0, 0, 0.8);
    }
    /* 小圆点 */
    .totalColor{
        background-color: #fc5157
    }
</style>
